<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            background-color: #000;
        }
        div{
            width: 200px;
            height: 100%;
            margin: 0 auto;
            /* border: 1px solid #000; */
        }
        ul{
            width: 200px;
            height: 100%;
            display: flex;
            justify-content: space-around;
            flex-wrap: wrap;
            margin-left: -30px;
        }
        li{
            list-style: none;
            width: 35%;
            height: 100%;
        }
    </style>
</head>
<body>
     <div>
         <p><img src="./big_1.jpg" alt="" width="100%"></p>
         <ul>
             <li><img src="./small_1.jpg" alt=""></li>
             <li><img src="./small_2.jpg" alt=""></li>
             <li><img src="./small_3.jpg" alt=""></li>
             <li><img src="./small_4.jpg" alt=""></li>
             <li><img src="./small_5.jpg" alt=""></li>
             <li><img src="./small_6.jpg" alt=""></li>
             <li><img src="./small_7.jpg" alt=""></li>
             <li><img src="./small_8.jpg" alt=""></li>
             <li><img src="./small_9.jpg" alt=""></li>
             <li><img src="./small_10.jpg" alt=""></li>
         </ul>
     </div>
</body>
</html>
<script>
    var imgs = document.querySelectorAll('img')
    for(var i = 1; i < imgs.length; i++){
        imgs[i].index = i
        imgs[i].onmousemove = function () {
            imgs[0].src="./big_"+this.index+'.jpg'
        }
    }
</script>